import React from 'react';
import * as am4core from '@amcharts/amcharts4/core'
import * as am4charts from '@amcharts/amcharts4/charts'
// import am4themes_animated from '@amcharts/amcharts4/themes/animated'
import Logo from '../../logo.svg'

export default class LineAmcharts extends React.Component {
  componentDidMount() {

    // Create chart instance
    var chart = am4core.create("getY", am4charts.XYChart);

    // Add data
    chart.data = [{
      "category": 1,
      "value": 450,
      "value2": 450 * 2
    }, {
      "category": 2,
      "value": 1200,
      "value2": 1200 * 2
    }, {
      "category": 3,
      "value": 1850,
      "value2": 1850 * 2
    }];


    // Create axes
    var valueX = chart.xAxes.push(new am4charts.ValueAxis());
    valueX.dataFields.value = "category";
    valueX.renderer.grid.template.location = 0;
    //categoryAxis.renderer.minGridDistance = 30;

    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

    // Create series
    var series = chart.series.push(new am4charts.ColumnSeries());
    series.dataFields.valueY = "value";
    series.dataFields.valueX = "category";
    series.columns.template.width = 50;
    this.series = series

    // Create series
    var columnSeries2 = chart.series.push(new am4charts.ColumnSeries());
    columnSeries2.dataFields.valueY = "value2";
    columnSeries2.dataFields.valueX = "category";
    columnSeries2.columns.template.width = 50;
    columnSeries2.hidden = true
    this.series2 = columnSeries2

    var columnSeries3 = chart.series.push(new am4charts.ColumnSeries());
    columnSeries3.dataFields.valueY = "value255";
    columnSeries3.dataFields.valueX = "category";
    columnSeries3.columns.template.width = 50;
    columnSeries3.hidden = false
    this.series3 = columnSeries3

    var LineSeries = chart.series.push(new am4charts.LineSeries());
    LineSeries.dataFields.valueY = "value";
    LineSeries.dataFields.valueX = "category";

    chart.maskBullets = false;



  }
  handleChange = () => {
    console.log('click', this.series.hidden, this.series2.hidden)
    if (this.series.hidden) {
      this.series.show()
    } else {
      this.series.hide()
    }
    if (this.series2.hidden) {
      this.series2.show()
    } else {
      this.series2.hide()
    }
  }
  render() {
    return (
      <>
        <div id='getY'></div>
        <button onClick={this.handleChange}>切换</button>
      </>
    )
  }
}